<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: perspective set on the named flow content's parent does not apply when content flows into region</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
        <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
        <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#perspective-property">
		<!-- TODO: Link to fragmentation spec section about perspective, fragments and fragmentainers - 
		           once this gets in the spec. -->
		<meta name="assert" content="Test checks that content that has a 3D transform does not respect the perspective 
		                             set on its parent when flowed into a region.">
		<meta name="flags" content="ahem">
		<link rel="match" href="reference/regions-transforms-001-ref.html">
		<style>
		.ahem {
			font-family: Ahem;
			font-size: 20px;
			line-height: 1em;
       }
		#parent {
			width: 100px;
			height: 100px;
			perspective: 800px;
		}
		#named-flow {
			flow-into: f;
			transform: rotateY(85deg);
			color: red;
		}
		#region {
			flow-from: f;
			width: 100px;
			height: 100px;
			background-color: green;
		}
		#green-rect {
		    position: absolute;
		    top: 50px;
		    left: 53px;
		    width: 10px;
		    height: 100px;
		    background-color: green;
		}
		</style>
	</head>
	<body>
		<p>The test passes if you see a green square and no red.</p>
		<div id="region"></div>
		<div id="parent">
			<div id="named-flow" class="ahem">
				XXXXX<br>
				XXXXX<br>
				XXXXX<br>
				XXXXX<br>
				XXXXX<br>
			</div>
		</div>
		<!-- If the red content is properly transformed, it will be hidden beneath this green div --> 
		<div id="green-rect"></div>
	</body>
</html>